<template>
  <div :class="{ 'maximized': isMaximized }">
    <el-card>
      <div slot="header" class="clearfix">
        <span style="margin-right: 10px;">{{ title }}</span>
        <!-- 最大化按钮 -->
        <el-button
          size="mini"
          @click="toggleMaximize"
          icon="el-icon-full-screen"
          style="margin-right: 10px;"
        >
          {{ isMaximized ? '恢复' : '最大化' }}
        </el-button>
        <!-- 主题select选择框 -->
        <el-select
          size="mini"
          :disabled="themDisabled"
          slot="extra"
          style="width: 120px"
          v-model="selectTheme"
          default-first-option
          @change="handleThemeChange"
        >
          <el-option
            v-for="(theme, index) in aceConfig.themes"
            :key="index"
            :label="theme"
            :value="theme"
          ></el-option>
        </el-select>
        <!-- 语言select选择框 -->
        <el-select
          size="mini"
          :disabled="langDisabled"
          slot="extra"
          style="width: 120px; margin-left: 10px"
          v-model="selectLang"
          default-first-option
          @change="handleLangChange"
        >
          <el-option
            v-for="lang in aceConfig.langs"
            :key="lang"
            :label="lang"
            :value="lang"
          ></el-option>
        </el-select>
      </div>

      <!-- editor插件 -->
      <editor
        :value="content"
        @input="handleInput"
        @init="editorInit"
        :lang="aceConfig.selectLang"
        :theme="aceConfig.selectTheme"
        :options="aceConfig.options"
        width="100%"
        height="400px"
      />
    </el-card>
  </div>
</template>

<script>
import { props } from 'vue2-ace-editor'

// 编辑器主题
const themes = ['xcode', 'eclipse', 'monokai', 'cobalt']
// 编辑器语言
const langs = ['json', 'c_cpp', 'java', 'javascript', 'golang']
// tabs
const tabs = [2, 4, 8]
// 字体大小
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22]
// 编辑器选项
const options = {
  tabSize: 4, // tab默认大小
  showPrintMargin: false, // 去除编辑器里的竖线
  fontSize: 20, // 字体大小
  highlightActiveLine: true, // 高亮配置
  enableBasicAutocompletion: true, // 启用基本自动完成
  enableSnippets: true, // 启用代码段
  enableLiveAutocompletion: true, // 启用实时自动完成
}

export default {
  name: 'CodeEdit',
  components: {
    editor: require('vue2-ace-editor'),
  },
  props: {
    content: String, // content就是上面prop中声明的值，要保持一致
    selectTheme: {
      type: String,
      default: 'monokai',
    },
    selectLang: {
      type: String,
      default: 'javascript',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '代码编辑器',
    },
    themDisabled: {
      type: Boolean,
      default: false,
    },
    langDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false, // 模态窗口显示控制
      isMaximized: false, // 最大化状态
      aceConfig: {
        langs,
        themes,
        tabs,
        fontSizes,
        options, // 编辑器属性设置
        selectTheme: 'monokai', // 默认选择的主题
        selectLang: 'javascript', // 默认选择的语言
        readOnly: false, // 是否只读
      },
    }
  },
  model: {
    prop: 'content',
    event: 'change',
  },
  methods: {
    handleInput(e) {
      this.$emit('change', e)
    },
    toggleMaximize() {
      this.isMaximized = !this.isMaximized
      this.editorInit() // 重新初始化编辑器以确保样式应用
    },
    handleThemeChange(value) {
      this.aceConfig.selectTheme = value
      this.editorInit()
    },
    handleLangChange(value) {
      this.aceConfig.selectLang = value
      this.editorInit()
    },
    editorInit() {
      require('brace/ext/language_tools') // language extension prerequisite...
      require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
      require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
    },
  },
}
</script>

<style scoped>
.settingTitle {
  font-size: larger;
}

.settingDescription {
  font-size: small;
  color: #a8a8af;
}

.maximized {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 确保在最上层 */
  background: white; /* 背景色可选 */
}

.maximized .el-card {
  height: 100vh; /* 最大化时高度为100vh */
}
</style>
